<template>
    <div id="app" ref="app">
        <transition :name="Version.switchTransition">
            <router-view></router-view>
        </transition>
        <announcement :texts="info"/>
    </div>
</template>
<script>
import announcement from '@/components/base/announcement.vue'
import { mapState, mapMutations } from 'vuex'
import { getAppInfo } from '@/api/version'
export default {
    components : {
        announcement
    },
    name: "App",
    data() {
        return {
            info : ['尊敬的用户:此软件只供学习使用，禁止使用此软件谋取商业利益。如有以上情况，后果自负。']
        }
    },
    mounted() {
    },
    computed : {
        ...mapState(['Version', 'setup'])
    },
    watch : {
        $route(to,from){
            const isBack = this.$router.isBack;
            if (from.meta.leavel && to.meta.leavel) {
                // 说明是一级到一级
                this.Version.switchTransition = "onefade";
            } else if (!to.meta.leavel) {
                // 说明到的是二级
                this.Version.switchTransition = "twofade";
            }
            if (isBack) {
                this.Version.switchTransition = "threefade";
            }
                this.$router.isBack = false; //监听路由后重置 isBack 用于判断如何跳转动画；
        }
    },
    created(){
        this.AppInit()
        this.appBack()
        this.getAppInfo()
    },
    methods: {
        ...mapMutations(['AppInit']),

        getAppInfo(){
            getAppInfo().then(res => {
                if(res.code == 200){
                    this.info = res.data.info
                }
            }).catch(e => {})
        },

        // App左右滑返回键
        appBack(){
            let self = this

            let params = {
                keyEventBind: {
                    backbutton: true, //关闭back按键监听
                }
            }

            // 判断是否关闭默认音量事件
            if(this.setup.bookRead.volumeFlipping){
                params.keyEventBind.volumeupbutton = true
                params.keyEventBind.volumedownbutton = true
            }

            // 修改默认左右滑动事件
            mui.init(params)
            //首页返回键处理
            // 处理逻辑： 1s内，连续两次按返回键，则退出应用；
            var first = null;
            mui.back = function(){
            // 首次按键， 提示 再按一次退出应用
                if(self.$route.path != '/home' && self.$route.path != '/bookshelf' && self.$route.path != '/user'){
                    self.$router.isBack = true
                    self.$router.back(-1)
                    return
                }
                if(!first){
                    first = new Date().getTime();//记录第一次按下回退键的时间
                    self.$toast("再按一次退出应用");
                    setTimeout(function(){
                        //1s 后清除
                        first = null;
                    }, 1000);
            
                }else{
                    if(new Date().getTime() - first < 1000){
                        //如果两次按下的时间小于1s
                        plus.runtime.quit(); //那么就退出app
                    }
                }
            }
        },
    },
};
</script>

<style>
* {
    margin: 0;
    padding: 0;
    user-select: none;
}
body {
    font-size: 12px;
    background: #f4f4f4;
}
#app {
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
}

/* // 一级动画 其实没有动画效果 直接切换 主要是为了菜单栏的切换 */
.onefade-enter {
    opacity: 0;
}
.onefade-enter-active,
.onefade-leave-active {
    transition: all 0;
}
.onefade-leave-to {
    opacity: 0;
}

/* //点击list列表 enter leave动画 */

.twofade-enter-active,
.twofade-leave-active {
    transition: all 0.5s;
    position: absolute;
}

.twofade-leave-to {
    opacity: 0;
    transform: translateX(-100%);
}
.twofade-enter{
    opacity: 0;
    transform: translateX(100%);
}


/* //点击返回按钮执行的 enter leave动画 */

.threefade-enter-active,
.threefade-leave-active {
    transition: all 0.5s;
    position: absolute;
}
.threefade-leave-to {
    opacity: 0;
    transform: translateX(100%);
}
.threefade-enter {
    opacity: 0;
    transform: translateX(-100%);
}

</style>
